<template>
  <div>
    <van-nav-bar
      title="性别修改"
      right-text="确认"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="男" clickable @click="radio = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="女" clickable @click="radio = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast, NavBar } from "vant";
import { RadioGroup, Radio } from "vant";
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(NavBar);
export default {
  name: "gender",
  data() {
    return {
      radio: "",
    };
  },
  mounted() {
    this.userId= localStorage.getItem("userId")
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
      //1是男的 2是女的
       let sex_num= this.radio
      this.axios({
        url:"http://localhost:3000/xiaomi",
        method:'post',
        data:{
          data:sex_num,
          userId:this.userId
        }
      }).then((res)=>{
      let sex_num=JSON.parse(res.config.data).data
        if(sex_num==1){
             this.$router.push({path:"compilation",query:{sex_num:"男"}})
        }else{
             this.$router.push({path:"compilation",query:{sex_num:"女"}})
        }
      })
    },
  },
};
</script>
<style scoped>
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-icon {
  color: black;
}
.van-cell__title{
    text-align: left;
}
.van-icon{
    color: aliceblue;
}
</style>